<template>
  <div>
    <header class="whiteTop">
      <div class="container">
        <div class="left">
          <span>万骏驾考售后服务热线：028-85031088</span>
        </div>
        <div class="right">
          <a href="https://qiye.wanjunjiakao.com/#/cooperate" target="_blank"
            ><span class="rightLink curp">驾校入驻</span></a
          >
          <a href="https://qiye.wanjunjiakao.com/" target="_blank"
            ><span class="rightLink ml curp">驾校后台</span></a
          >
        </div>
      </div>
    </header>
    <!-- 搜索区 -->
    <section class="topSearch">
      <div class="container">
        <div class="left">
          <div class="logo">
            <img src="../assets/images/logo.svg" alt="" />
          </div>
          <div class="city">
            <div class="cityText">
              <img
                src="../assets/images/location.png"
                alt=""
                class="location"
              />
              <span class="curp" @click="showCityListBox"
                >{{ city ? city.title : "" }}【城市切换】</span
              >
            </div>
            <div class="showCityListBox" v-if="showCityBox">
              <img
                src="~/assets/images/tipsShanjiao.png"
                alt=""
                class="sanjiao"
              />
              <span class="el-icon-close" @click="hideCityListBox"></span>
              <div class="hotcity" v-if="cityData.hot">
                <span class="title">热门城市：</span>
                <span
                  class="cityItem curp"
                  @click="setCity(item)"
                  v-for="(item, i) in cityData.hot"
                  :key="i"
                  >{{ item.title }}</span
                >
              </div>
              <div class="pinyin" v-if="cityData.charter">
                <span class="title">按拼音首字母选择：</span>
                <span
                  class="cityItem curp"
                  v-for="(item, i) in cityData.charter"
                  :key="i"
                  @click="scrollTopa(item)"
                  >{{ item }}
                  <!-- <a :href="'#' + item">{{ item }}</a> -->
                </span>
              </div>
              <div class="listBox" id="listBox" v-if="cityData.list">
                <div
                  class="listItem"
                  v-for="(item, i) in cityData.list"
                  :id="item.charter ? item.charter : ''"
                  :ref="item.charter"
                  :key="i"
                >
                  <div class="listItem_left">
                    <span class="title"
                      >{{ item.charter ? item.charter : "" }}
                      {{ item.title }}：</span
                    >
                  </div>
                  <div class="listItem_right">
                    <span
                      class="cityItem curp"
                      @click="setCity(itemC)"
                      v-for="(itemC, j) in item.children"
                      :key="j"
                      >{{ itemC.title }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="search">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ searchType
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :command="item"
                  v-for="(item, i) in searchTypeList"
                  :key="i"
                  >{{ item }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <input
              type="text"
              :placeholder="searchplace"
              v-model="keyword"
            />
            <div class="searchBtn" @click="searchText">
              <span class="el-icon-search" style="margin-right:10px"></span>
              <span>搜索 </span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 导航 -->
    <nav class="wjNav">
      <div class="container">
        <ul>
          <li
            @click="handleNav(index)"
            v-for="(navItem, index) in navList"
            :key="navItem.title"
            :class="[
              index == navActive ? 'active' : '',
              index == 1 ? ' showHoverLi' : '',
            ]"
          >
            <span class="navItem" @click="goroute(navItem)"
              >{{ navItem.title }}
              <span v-if="index == 1" class="el-icon-arrow-down"></span>
            </span>
            <div class="showHover" v-if="index == 1">
              <img
                src="~/assets/images/tipsShanjiao.png"
                alt=""
                class="sanjiao"
              />
              <nuxt-link
                class="item curp"
                v-for="(processItem, i) in process"
                :key="i"
                :to="{
                  name: processItem.linksrc,
                  query: { sub: processItem.sub ,group:processItem.group},
                }"
              >
                <span class="title">{{ processItem.title }}</span>
              </nuxt-link>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import { cityfilter } from "~/api/commen";
import Cookie from "js-cookie";
export default {
  components: {},

  data() {
    return {
      searchplace: "请输入关键词：如驾校名称",
      keyword: '',
      searchTypeList: ["驾校", "教练", "陪练", "指南"],
      navList: [
        { title: "首页", linksrc: "/" },
        { title: "模拟考试", linksrc: "/examination" },
        { title: "驾校", linksrc: "/school" },
        { title: "教练", linksrc: "/coach" },
        { title: "陪练", linksrc: "/accompany" },
        { title: "指南", linksrc: "/guide" },
        { title: "交通标志", linksrc: "/signs" },
        { title: "软件下载", linksrc: "/download" },
      ],
      // city: {},
      // 选择学车流程
      process: [
        {
          title: "科目一",
          tips: "真实案列，通过率高",
          imgurl: require("~/assets/images/sub1.png"),
          linksrc: "examination-subjectOF",
          sub: 1,
          group:1
        },
        {
          title: "科目二",
          tips: "精选视频，详解考点",
          imgurl: require("~/assets/images/sub2.png"),
          linksrc: "examination-subjectTT",
          sub: 2,
        },
        {
          title: "科目三",
          tips: "大路，知识及技巧",
          imgurl: require("~/assets/images/sub3.png"),
          linksrc: "examination-subjectTT",
          sub: 3,
        },
        {
          title: "科目四",
          tips: "2021新题库",
          imgurl: require("~/assets/images/sub4.png"),
          linksrc: "examination-subjectOF",
          sub: 4,
            group:1
        },
      ],
      showCityBox: false,
      change: false,
      cityData: {},
    };
  },
  
  methods: {
    handleNav(index) {
      this.$store.commit("navList/SET_NAVACTIVE", index);
    },
    showCityListBox() {
      var that = this;
      this.showCityBox = true;
    },
    hideCityListBox() {
      this.showCityBox = false;
    },
    async getCityList() {
      let cityData = await cityfilter();
      this.cityData = cityData;
    },
    setCity(val) {
      if (val.id == this.city.id) {
        this.hideCityListBox();
        return;
      }
      Cookie.set("city", val.id);
      this.$store.commit("navList/SET_CITY", val);
      sessionStorage.setItem("city", JSON.stringify(val));
      this.hideCityListBox();
      // this.$router.go(0)
      location.reload();
      // location.reload();
      //   location.reload();
    },
    scrollTopa(refName) {
      let top = this.$refs[refName][0].offsetTop - 100;
      document.getElementById("listBox").scrollTop = top;
    },
    searchText() {
      if (!this.keyword) {
        alert("请输入关键字");
        return;
      }
       this.$store.commit("navList/SET_SKEYWORD", this.keyword);
      if (this.$route.path.includes("/search")) {
             this.change=false;
         this.$router.replace({
          name: "search-search",
          query: { keyword: encodeURIComponent(this.keyword),searchType:encodeURIComponent(this.searchType),time:new Date().getTime() },
        });
   
      } else {
         this.change=false;
        this.$router.push({
          name: "search-search",
          query: { keyword: encodeURIComponent(this.keyword),searchType:encodeURIComponent(this.searchType) },
        });
          
      }
    },
    handleCommand(command) {
      this.searchType = command;
       this.$store.commit("navList/SET_SEARCHTYPE", command);
    },
    goroute(navItem){
         this.$router.push(navItem.linksrc);
         if(navItem.title=='驾校' || navItem.title=='教练' || navItem.title=='陪练'  || navItem.title=='指南'){
             this.$store.commit("navList/SET_SEARCHTYPE", navItem.title);
         }
    }
  },
  created() {
    this.getCityList();
  },

  watch: {
    searchType(val) {
      if(val=='驾校'){
        this.searchplace='请输入关键词：如驾校名称'
      }else if(val=='教练'){
        this.searchplace='请输入关键词：如教练姓名'
      }else if(val=='陪练'){
        this.searchplace='请输入关键词：如陪练姓名'
      }else if(val=='指南'){
        this.searchplace='请输入关键词：如指南标题'
      }
    },
  
  },
  computed: {
    ...mapState("navList", ["navActive", "city",'searchType','skeyword']),
  },

};
</script>

<style scoped lang='scss'>
.searchText {
  color: #fff;
}
::v-deep {
  .el-dropdown {
    margin-left: 20px;
    cursor: pointer;
  }
}
</style>